<!-- 1 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style type="text/css">

    	p {
    		color: red;
    	}

    	.block p {
    		color: green;
    	}

    	.block > p {
    		color: blue;
    	}

    	p ~ div {
    		width: 200px;
    	}

    	p + div {
    		width: 300px;
    	}

    </style>
</head>
<body>
    <div class="block">
    	<p>第一个 P 元素</p>
    	<div class="bd">
    		<p>第二个 P 元素</p>
    	</div>
    	<div class="ft"></div>
    </div>
    <p>第三个 P 元素</p>
</body>
</html>